<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>搜索</title>

	<link rel="stylesheet" type="text/css" href="/static/css/resources/bootstrap.min.css"/>
	<link rel="stylesheet" type="text/css" href="/static/css/stylesheets/personal.css"/>
	<script type="text/javascript" src="/static/js/resources/jquery.min.js"></script>
	<script src="/static/js/resources/bootstrap.min.js"></script>
	<script src="/static/js/resources/bootstrapValidator.js"></script>


	<script type="text/javascript" src="/resources/ueditor.config.js"></script>
	<script type="text/javascript" src="/resources/ueditor.all.js"></script>

</head>
<body>
<div class="nav" th:include="pages/common/nav ::nav">
</div>

<div class="container-box">
	<div class="cont-top">
		<img src="/static/images/test/1.jpg" class="background-img">

		<div class="head-box">
			<img th:src="${user.getImgUrl()}" class="user-head">
		</div>
		<span class="user-name" th:text="${user.getNickname()}">火火</span>
		<span class="introduction" th:text="${user.getResume()}"></span>
	</div>

	<div class="col-md-4 cont-rit">
		<!--部分个人信息-->
		<div class="personal">

			<div class="info">
				<div class="item">
					<a href="/personalCenter?type=01">
						<span class="num" th:text="${session.user.getAttentionUsers().size()}">112</span>
						<span class="text">关注</span>
					</a>
				</div>
				<div class="item">
					<a href="/personalCenter?type=02">
						<span class="num" th:text="${session.user.getFollowUsers().size()}">234</span>
						<span class="text">粉丝</span>
					</a>
				</div>
				<div class="item">
					<a href="/personalCenter?type=03">
						<span class="num" th:text="${session.user.getBlogs().size()}">96</span>
						<span class="text">微博</span>
					</a>
				</div>
			</div>
		</div>

		<!-- 个人资料 -->
		<div class="per-info">
			<span class="head">个人资料</span>

			<ul class="info-box">
				<li>
					<span class="tit">昵称:</span>
					<span class="info" th:text="${user.getNickname()}">111</span>
				</li>
				<li>
					<span class="tit">邮箱:</span>
					<span class="info" th:text="${user.getEmail()}"></span>
				</li>
				<li>
					<span class="tit">性别:</span>
					<span class="info" th:text="${user.getSex()}"></span>
				</li>
				<li>
					<span class="tit">电话:</span>
					<span class="info" th:text="${user.getPhone()}"></span>
				</li>
				<li>
					<span class="tit">简介:</span>
					<span class="info" th:text="${user.getResume()}"></span>
				</li>
			</ul>


		</div>
	</div>


	<div class="col-md-8 cont-left">
		<!--自己发布的微博-->
		<div class="fri-news" id="fri-news" style="">
			<div class="news-item" th:each="blog: ${blogPage.getContent()}">

				<div  th:if="${blog.isHot()}" class="hot-blog">
					<span class="glyphicon glyphicon-fire"></span>
				</div>

				<div class="item-top">
					<div class="user-head">
						<a th:href="'/personalCenter/' + ${blog.getUser().getId()}">
							<img th:src="${blog.getUser().getImgUrl()}" class="head-img"/>
						</a>
					</div>
					<div class="item-info">
						<div class="user-name" th:text="${blog.getUser().getNickname()}"></div>
						<div class="create-time" th:text="${#dates.format(blog.getCreateTime(),'yyyy-MM-dd HH:mm')}"></div>
						<p class="text" th:utext="${blog.getContext()}"></p>
						<!--图片??-->
					</div>
				</div>
				<div class="item-botm">
					<a href="javascript:void(0);" class="comment comment-list-btn">
						<span class="glyphicon glyphicon-pencil icon"></span>评论
					</a>
					<span class="cut"></span>
					<a href="javascript:void(0);" class="good"
					   th:attr="data-blogId=${blog.getId()},data-status=${blog.isPoint(session.user.id)}">
						<span class="glyphicon glyphicon-thumbs-up icon"></span> <span
							th:text="${blog.isPoint(session.user.id)}?'取消点赞':'点赞'"></span> <span
							th:text="${blog.getPoints()}"></span>
					</a>
				</div>
				<div class="comment-list">
					<span class="triangle"></span>

					<div class="comment-left">
						<a th:href="'/personalCenter/' + ${session.user.getId()}">
							<img th:src="${session.user.getImgUrl()}" class="head">
						</a>
					</div>
					<div class="comment-rit">
						<div class="add-comment">
							<textarea name="" class="text" th:attr="data-blogId=${blog.getId()}"></textarea>
							<a href="javascript:void(0);" class="comment-btn">评论</a>
						</div>
						<div class="comment-container">

							<div class="fri-comment" th:each="comment: ${blog.getComments()}">
								<a th:href="'/personalCenter/' + ${comment.getUser().getId()}">
									<img th:src="${comment.getUser().getImgUrl()}" class="head">
								</a>

								<div class="info-box">
                                <span class="text">
                                    <span class="fir-name" th:text="${comment.getUser().getNickname()}"></span>:&nbsp
                                    <span th:text="${comment.getContext()}"></span>
                                </span>
									<span class="create-time"
												th:text="${#dates.format(comment.getCreateTime(),'yyyy-MM-dd HH:mm')}"></span>
								</div>
							</div>

						</div>
					</div>
				</div>
			</div>
			<ul class="pagination">
				<li class="arrow" th:unless="${blogPage.getNumber()} == 0"><a
						th:href="'/search?page=' + ${blogPage.getNumber()} +'&&search=' + ${param.search!=null?param.search[0]:'all'}">&laquo;</a>
				</li>
				<li><a href="javascript:;">当前页面 第<span th:text="${blogPage.getNumber()+1}"></span>页</a></li>
				<li class="arrow" th:unless="${blogPage.getNumber()} >= ${blogPage.getTotalPages() -1}"><a
						th:href="'/search?page=' + ${blogPage.getNumber() + 2} +'&&search=' + ${param.search!=null?param.search[0]:'all'}">&raquo;</a>
				</li>
				<li><a href="javascript:;">共 <span th:text="${blogPage.getTotalPages()}"></span>页</a></li>
				<li class="goto">
					<a>
						<form action="/search" method="get">
							<span>跳转至</span>
							<input onkeyup="value=value.replace(/[^\d]/g,'')" min="0" th:max="${blogPage.getTotalPages()}" type="number" name="page">
							<input class="hide" type="text" name="status" th:value="${param.search!=null?param.search[0]:'all'}">
							<span>页</span>
							<button type="submit">确认跳转</button>
						</form>
					</a>
				</li>
			</ul>

		</div>
	</div>
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" th:include="pages/common/modal :: modal"></div>
	<script type="text/javascript">
		/*发布微博, 添加评论*/
		$(function () {
			var fri_news = $("div#fri-news"),
					news_item = fri_news.find("div.news-item");

			function init(e) {
				var $this = $(e),
						comment_list = $this.find("div.comment-list"),
						add_comment = comment_list.find("textarea.text"),
						comment_val = add_comment.val(),
						add_comment_btn = comment_list.find("a.comment-btn"),
						comment_container = $this.find("div.comment-container"),
						comment_list_btn = $this.find("a.comment-list-btn");

				/*添加评论框获得和失去焦点*/
				add_comment.bind({
					focus: function () {
						add_comment.addClass("onfocus");
					},
					blur: function () {
						add_comment.removeClass("onfocus");
					}
				});

				/*添加评论*/
				add_comment_btn.bind("click", function () {
					var new_comment = comment_list.find("textarea.text"),
							new_val = new_comment.val(),
							blogId = new_comment.attr('data-blogId');
					$.ajax({
						url: "/addComment",
						data: {
							"blogId": blogId,
							"context": new_val
						},
						contentType: "application/x-www-form-urlencoded; charset=utf-8",
						type: 'POST',
						success: function (data) {
//							good_btn.addClass("active");
//							status = true;
//							comment_container.append(get_comment(new_val));
							location.reload();
						}
					});
				});

				function get_comment(new_val) {
					return "<div class='fri-comment'>" +
							"<img src='/static/images/test/head.jpg' class='head'>" +
							"<div class='info-box'><span class='text'><span class='fir-name' th:text='${comment.getUser().getNickname()}'></span>: " + new_val + "</span>" +
							"<span class='create-time' th:text='${#dates.format(comment.getCreateTime(),'yyyy-MM-dd HH:mm')}'></span></div>" +
							"</div>";
				}

				/*评论框所有评论隐藏显示*/
				if (comment_container.children('.fri-comment').length > 0) {
					comment_list.show();
				}
				else {
					comment_list.hide();
				}

				comment_list_btn.bind("click", function () {
					comment_list.toggle();
				});


				/*点赞功能*/
				var good_btn = $this.find("a.good");

				function pointClick() {

					var _this = $(this);
					var status = _this.attr("data-status");
					var blogId = _this.attr('data-blogId');
					_this.unbind("click");
					_this.bind("click", function () {
						alert('请稍等');
					});
					if (status == 'false') {
						$.ajax({
									url: "/pointBlog",
									data: {
										"blogId": blogId
									},
									type: 'POST',
									success: function (data) {
										_this.unbind("click");
										_this.bind('click', pointClick);
										console.info(data);
										if (data.isSuccess) {
											good_btn.addClass("active");
											status = true;
											_this.attr("data-status", true);
											_this.children().get(1).innerHTML = "取消点赞";
											var num = _this.children().get(2).innerHTML;
											_this.children().get(2).innerHTML = parseInt(num) + 1;

										}
										else {
											alert(data.reason);
										}
									}
								}
						);
					}
					else if (status == 'true') {
						$.ajax({
							url: "/unPointBlog",
							data: {
								"blogId": blogId
							},
							type: 'POST',
							success: function (data) {
								_this.unbind("click");
								_this.bind('click', pointClick);
								console.info(data);
								if (data.isSuccess) {
									good_btn.removeClass("active");
									status = false;
									_this.attr("data-status", false);
									_this.children().get(1).innerHTML = "点赞";
									var num = _this.children().get(2).innerHTML;
									_this.children().get(2).innerHTML = parseInt(num) - 1;
								}
								else {
									alert(data.reason);
								}
							}
						});
					}
				}

				good_btn.bind("click",pointClick);

			}

			news_item.each(function (i, e) {
				init(e); //针对循环出的当前一个对象e ??
			});


			/*富文本, 发布新状态*/
			/*富文本初始化*/
			var editor = new UE.ui.Editor();
			editor.render("myEditor");
			//1.2.4以后可以使用一下代码实例化编辑器
			//UE.getEditor('myEditor')

			var myeditor = $("textarea#myEditor"),
					publish_btn = $("a#publish-btn"),
					fri_news = $("div#fri-news");

			publish_btn.bind("click", function () {
				var content = UE.getEditor('myEditor').getContent();    //UEditor取得内容Html的方法

				function publish_info(info) {
					return "<div class='news-item'><div class='item-top'>" +
							"<div class='user-head'><img src='/static/images/test/head.jpg' class='head-img'/></div>" +
							"<div class='item-info'><div class='user-name'>AAA</div>" +
							"<div class='create-time'>2016-4-16</div>" +
							"<p class='text'>" + info + "</p></div></div>" +

							"<div class='item-botm'>" +
							"<a href='javascript:void(0);' class='comment comment-list-btn'>" +
							"<span class='glyphicon glyphicon-pencil icon'></span>评论</a><span class='cut'></span>" +
							"<a href='javascript:void(0);' class='good' data-status=false>" +
							"<span class='glyphicon glyphicon-thumbs-up icon'></span>点赞</a><span class='cut'></span>" +
							"<a href='javascript:void(0);' class='report'>" +

							"<div class='comment-list'><span class='triangle'></span>" +
							"<div class='comment-left'><img src='/static/images/test/head.jpg' class='head'></div>" +
							"<div class='comment-rit'><div class='add-comment'><textarea name='' class='text'></textarea>" +
							"<a href='javascript:void(0);' class='comment-btn'>评论</a></div>" +
							"<div class='comment-container'></div></div></div></div>";
				}

				$.ajax({
					url: "/publishBlog",
					data: {
						"context": content
					},
					type: 'POST',
					success: function (data) {
						var news = $.parseJSON(data);

						if (news.isSuccess) {
							//新发布的微博显示为第一个
							fri_news.prepend(publish_info(content));
							//页面已加载完,新发布的微博无法取到,所以需要重新循环,取得父元素的第一个子元素也就是新发布的微博.
							init(fri_news.children('div.news-item')[0]);
						}
						else {
							alert("发布失败");
						}
					}
				})

			});


		});

	</script>
</div>
</body>
</html>